<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Advanced widgets in Java Gnome</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, Java Gnome, advanced widgets, Java, programming, Linux">
<meta name="description" content="Advanced widgets in Java Gnome">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">

<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Advanced widgets in Java Gnome</h1>

<p>
In this part of the Java Gnome programming tutorial, we will introduce some more
advanced widgets. 
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* top_horizontal */
google_ad_slot = "3327173442";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<h2>TextView</h2>

<p>
<b class="keyword">TexView</b> widget is used for displaying and editing multiline text.
TexView widget has also the MVC design. The TextView represents the view component and 
<b class="keyword">TexBuffer</b> represents the model component. The TexBuffer is used to 
manipulate the text data. <b class="keyword">TextTag</b> is an attribute that can be applied to the
text. The <b class="keyword">TextIter</b> represents a position between two characters 
in the text. All manipulation with the text is done using text iterators. 
</p>

<div class="codehead">textview.java</div> 
<pre class="code">
package com.zetcode;

import org.gnome.gdk.Event;
import org.gnome.gtk.Gtk;

import org.gnome.gtk.TextBuffer;
import org.gnome.gtk.TextIter;
import org.gnome.gtk.TextTag;
import org.gnome.gtk.TextView;
import org.gnome.gtk.Widget;
import org.gnome.gtk.Window;
import org.gnome.gtk.WindowPosition;
import org.gnome.gtk.WrapMode;
import org.gnome.pango.FontDescription;
import org.gnome.pango.Style;

/**
 * ZetCode Java Gnome tutorial
 *
 * This program demonstrates the
 * TextView widget. 
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */

public class GTextView extends Window {

    public GTextView() {
    
        setTitle("TextView");
    
        initUI();
        
        connect(new Window.DeleteEvent() {
            public boolean onDeleteEvent(Widget source, Event event) {
                Gtk.mainQuit();
                return false;
            }
        });
    
        setDefaultSize(250, 200);
        setPosition(WindowPosition.CENTER);
        showAll();
    }
    
    
    public void initUI() {
        
        final TextView view;
        final FontDescription desc;
        final TextBuffer buffer;
        final TextTag colorText, italics, background, mleft;
        TextIter pointer;

        view = new TextView();

        desc = new FontDescription("Sans, 10");
        view.modifyFont(desc);

        buffer = new TextBuffer();

        colorText = new TextTag();
        colorText.setForeground("blue");

        italics = new TextTag();
        italics.setStyle(Style.ITALIC);

        background = new TextTag();
        background.setBackground("lightgray");
        
        mleft = new TextTag();
        mleft.setLeftMargin(8);

        pointer = buffer.getIterStart();
        buffer.insert(pointer, "Plain text \n");
        buffer.insert(pointer, "Colored text\n", new TextTag[] {colorText, mleft});
        buffer.insert(pointer, "Text with colored background\n", background);
        buffer.insert(pointer, "Text in italics", italics);

        view.setBuffer(buffer);
        view.setPaddingAboveParagraph(5);
        add(view);
         
    }
    
    
    public static void main(String[] args) {
        Gtk.init(args);
        new GTextView();
        Gtk.main();
    }    
}
</pre>

<p>
The example shows some text with different 
<b class="keyword">TextTags</b> applied. 
</p>

<pre class="explanation">
 view = new TextView();
</pre>

<p>
TextView widget is created. 
</p>

<pre class="explanation">
 desc = new FontDescription("Sans, 10");
 view.modifyFont(desc);
</pre>

<p>
We set the font for the <b class="keyword">TextView</b> to be
Sans 10.
</p>

<pre class="explanation">
 colorText = new TextTag();
 colorText.setForeground("blue");
</pre>

<p>
A <b class="keyword">TextTag</b> widget is created. This tag will set the
color of the text to blue, if applied. 
</p>

<pre class="explanation">
 buffer.insert(pointer, "Text in italics", italics);
</pre>

<p>
Here we apply an italics text tag for the specified text. 
</p>


<br>
<img src="/img/gui/javagnome/textview.png" alt="TextView">
<div class="figure">Figure: TextView</div>
<br>


<h2>ListView</h2>

<p>
In the following example, we use the <b class="keyword">TreeView</b> widget 
in a list view mode. The <b class="keyword">ListStore</b> is used to store data.
</p>

<div class="codehead">listview.java</div> 
<pre class="code">
package com.zetcode;

import org.gnome.gdk.Event;
import org.gnome.gtk.CellRendererText;
import org.gnome.gtk.DataColumn;
import org.gnome.gtk.DataColumnString;
import org.gnome.gtk.Gtk;
import org.gnome.gtk.ListStore;
import org.gnome.gtk.Statusbar;
import org.gnome.gtk.TreeIter;
import org.gnome.gtk.TreePath;
import org.gnome.gtk.TreeView;
import org.gnome.gtk.TreeViewColumn;
import org.gnome.gtk.VBox;
import org.gnome.gtk.Widget;
import org.gnome.gtk.Window;
import org.gnome.gtk.WindowPosition;

/**
 * ZetCode Java Gnome tutorial
 *
 * This program demonstrates the
 * TreeView widget in listview mode. 
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */

public class GListView extends Window {

    private Actress[] actresses =
    {
        new Actress("Jessica Alba", "Pomona", 1981),
        new Actress("Sigourney Weaver", "New York", 1949),
        new Actress("Angelina Jolie", "Los Angeles", 1975),
        new Actress("Natalie Portman", "Jerusalem", 1981),
        new Actress("Rachel Weissz", "London", 1971),
        new Actress("Scarlett Johansson", "New York", 1984) 
    };

    private Statusbar statusbar;


    public GListView() {
    
        setTitle("ListView");
        
        initUI();
        
        connect(new Window.DeleteEvent() {
            public boolean onDeleteEvent(Widget source, Event event) {
                Gtk.mainQuit();
                return false;
            }
        });
        
        setDefaultSize(350, 300);
        setPosition(WindowPosition.CENTER);
        showAll();
    }
    
    
    public void initUI() {
        
        final TreeView view;
        final ListStore model;
        TreeIter row;
        CellRendererText renderer;
        TreeViewColumn column;

        final DataColumnString nameCol;
        final DataColumnString placeCol;
        final DataColumnString yearCol;
        
        
        statusbar = new Statusbar();
        
        model = new ListStore(new DataColumn[] {
                nameCol = new DataColumnString(),
                placeCol = new DataColumnString(),
                yearCol = new DataColumnString(),
        });

         
         for (Actress act : actresses) {
             row = model.appendRow();
             model.setValue(row, nameCol, act.name);
             model.setValue(row, placeCol, act.place);
             model.setValue(row, yearCol, String.valueOf(act.year));
         }

        view = new TreeView(model);

        column = view.appendColumn();
        column.setTitle("Name");
        renderer = new CellRendererText(column);
        renderer.setText(nameCol);

        column = view.appendColumn();
        column.setTitle("Place");
        renderer = new CellRendererText(column);
        renderer.setText(placeCol);

        column = view.appendColumn();
        column.setTitle("Year");
        renderer = new CellRendererText(column);
        renderer.setText(yearCol);
        
        view.connect(new TreeView.RowActivated() {

            public void onRowActivated(TreeView treeView,
                        TreePath treePath,
                        TreeViewColumn treeViewColumn) {
                         
                final TreeIter row;
                final String place;
                final String name;
                final String year;
                final String text;
                
                row = model.getIter(treePath);

                place = model.getValue(row, placeCol);
                name = model.getValue(row, nameCol);
                year = model.getValue(row, yearCol);

                text = name + ", " + place + ", " + year;

                statusbar.setMessage(text);
            }
        });

        VBox vbox = new VBox(false, 0);
        
        vbox.packStart(view);
        vbox.packStart(statusbar, false, false, 0);
        add(vbox);

    }
    
    class Actress {
        
       public String name;
       public String place;
       public int year;
        
       Actress(String name, String place, int year) {
           this.name = name;
           this.place = place;
           this.year = year;
       }
    }
    
    
    public static void main(String[] args) {
        Gtk.init(args);
        new GListView();
        Gtk.main();
    }
}
</pre>

<p>
In our example, we show a list of six actresses in the <b class="keyword">TreeView</b>
widget. Each of the rows shows the name, the place of born and the year of born for 
each of them. 
</p>

<pre class="explanation">
    class Actress {
       public String name;
       public String place;
       public int year;
       ...
    }
</pre>

<p>
The <b class="keyword">Actress</b> class is used
for storing data about an actress. 
</p>

<pre class="explanation">
 model = new ListStore(new DataColumn[] {
         nameCol = new DataColumnString(),
         placeCol = new DataColumnString(),
         yearCol = new DataColumnString(),
 });
</pre>

<p>
These lines declare the model to have three 
string data columns. 
</p>

<pre class="explanation">
 for (Actress act : actresses) {
     row = model.appendRow();
     model.setValue(row, nameCol, act.name);
     model.setValue(row, placeCol, act.place);
     model.setValue(row, yearCol, String.valueOf(act.year));
 }
</pre>

<p>
The model is filled with data from the array of actresses. 
</p>

<pre class="explanation">
 column = view.appendColumn();
 column.setTitle("Name");
 renderer = new CellRendererText(column);
 renderer.setText(nameCol);
</pre>

<p>
A new column is created with "Name" title. Each column has a cell renderer. 
The cell renderer is responsible for displaying data. In our case we have
the most common cell renderer, the <b class="keyword">CellRendererText</b>.
As the name suggests, it shows textual data in a 
<b class="keyword">TreeViewColumn</b>.
</p>

<pre class="explanation">
 row = model.getIter(treePath);

 place = model.getValue(row, placeCol);
 name = model.getValue(row, nameCol);
 year = model.getValue(row, yearCol);

 text = name + ", " + place + ", " + year;

 statusbar.setMessage(text);
</pre>

<p>
If we double click on an item, we display the whole row in the statusbar. 
</p>


<br>
<img src="/img/gui/javagnome/listview.png" alt="ListView">
<div class="figure">Figure: ListView</div>
<br>

<h2>Tree</h2>

<p>
In the last example of this chapter, we use the <b class="keyword">TreeView</b>
widget to show a hierarchical tree of data. 
</p>

<div class="codehead">tree.java</div>
<pre class="code">
package com.zetcode;

import org.gnome.gdk.Event;
import org.gnome.gtk.CellRendererText;
import org.gnome.gtk.DataColumn;
import org.gnome.gtk.DataColumnString;
import org.gnome.gtk.Gtk;
import org.gnome.gtk.Statusbar;
import org.gnome.gtk.TreeIter;
import org.gnome.gtk.TreePath;
import org.gnome.gtk.TreeStore;
import org.gnome.gtk.TreeView;
import org.gnome.gtk.TreeViewColumn;
import org.gnome.gtk.VBox;
import org.gnome.gtk.Widget;
import org.gnome.gtk.Window;
import org.gnome.gtk.WindowPosition;

/**
 * ZetCode Java Gnome tutorial
 *
 * This program demonstrates the
 * TreeView widget in tree view mode. 
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */

public class GTree extends Window {

    private DataColumnString dataCol;

    private TreeStore model;
    private TreeIter row;
    private TreeView view;
    private TreeIter rowChild;

    private TreeViewColumn column;
    private CellRendererText renderer;

    private Statusbar statusbar;

    public GTree() {
    
        setTitle("GTree");
        
        initUI();
        
        connect(new Window.DeleteEvent() {
            public boolean onDeleteEvent(Widget source, Event event) {
                Gtk.mainQuit();
                return false;
            }
        });
    
        setDefaultSize(350, 300);
        setPosition(WindowPosition.CENTER);
        showAll();
    }
    
    public void initUI() {

        statusbar = new Statusbar();

        model = new TreeStore(new DataColumn[] {
                dataCol = new DataColumnString(),
        });
        
        row = model.appendRow();
        model.setValue(row, dataCol, "Scripting languages");
        rowChild = model.appendChild( row );
        model.setValue(rowChild, dataCol, "PHP");         
        rowChild = model.appendChild( row );
        model.setValue(rowChild, dataCol, "Python");
        rowChild = model.appendChild( row );
        model.setValue(rowChild, dataCol, "PERL");
        rowChild = model.appendChild( row );
        model.setValue(rowChild, dataCol, "Ruby");
         
        row = model.appendRow();
        model.setValue(row, dataCol, "Compiling languages");
        rowChild = model.appendChild( row );
        model.setValue( rowChild, dataCol, "Java");         
        rowChild = model.appendChild( row );
        model.setValue( rowChild, dataCol, "C++");
        rowChild = model.appendChild( row );
        model.setValue( rowChild, dataCol, "C#");
        rowChild = model.appendChild( row );
        model.setValue( rowChild, dataCol, "C");

        view = new TreeView(model);
        
        column = view.appendColumn();
        column.setTitle("Programming Languages");
        renderer = new CellRendererText(column);
        renderer.setText(dataCol);  
    
        view.connect(new TreeView.RowActivated() {

            public void onRowActivated(TreeView treeView,
                        TreePath treePath,
                        TreeViewColumn treeViewColumn) {
                         
                final TreeIter row;
                final String text;
                
                row = model.getIter(treePath);
                text = model.getValue(row, dataCol);

                statusbar.setMessage(text);
            }
        });
        
        VBox vbox = new VBox(false, 0);
        
        vbox.packStart(view);
        vbox.packStart(statusbar, false, false, 0);
        add(vbox);
    }
    
    public static void main(String[] args) {
        Gtk.init(args);
        new GTree();
        Gtk.main();
    }  
}
</pre>

<p>
This time we use the <b class="keyword">TreeView</b> widget to show hierarchical 
data. 
</p>

<pre class="explanation">
 model = new TreeStore(new DataColumn[] {
         dataCol = new DataColumnString(),
 });
</pre>

<p>
Here we declare the <b class="keyword">TreeStore</b> to 
have one string data column. 
</p>

<pre class="explanation">
 model.setValue(row, dataCol, "Scripting languages");
</pre>

<p>
We append a top level node. 
</p>

<pre class="explanation">
 rowChild = model.appendChild( row );
 model.setValue(rowChild, dataCol, "PHP"); 
</pre>

<p>
We append a child row for the top level node. 
</p>

<pre class="explanation">
 view = new TreeView(model);
</pre>

<p>
We create the instance of the <b class="keyword">TreeView</b> widget. 
</p>

<pre class="explanation">
 column = view.appendColumn();
 column.setTitle("Programming Languages");
 renderer = new CellRendererText(column);
 renderer.setText(dataCol); 
</pre>

<p>
We create the column and the cell renderer. 
</p>

<pre class="explanation">
 row = model.getIter(treePath);
 text = model.getValue(row, dataCol);

 statusbar.setMessage(text);
</pre>

<p>
Upon double click, we show the selected node
in the statusbar. 
</p>

<br>
<img src="/img/gui/javagnome/tree.png" alt="Tree">
<div class="figure">Figure: Tree</div>
<br>

<hr class="btm">

<p>
In this chapter, we were talking about advanced Java Gnome widgets. 
</p>

<br>
<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified March 14, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>
